<template>
  <el-card shadow="hover">
    <el-button type="primary">添加品牌</el-button>
    <el-table border :data="trademark" class="table">
      <el-table-column
        type="index"
        label="序号"
        width="60"
        align="center"
      ></el-table-column>
      <el-table-column label="品牌名称" prop="tmName"></el-table-column>
      <el-table-column label="品牌LOGO">
        <template v-slot="{ row }">
          <img
            :src="row.logoUrl"
            :alt="row.tmName"
            style="width: 100px; height: 100px"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <el-button type="primary" link>更新</el-button>
        <el-button type="primary" link>删除</el-button>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:page-size="pageSize"
      v-model:currentPage="currentPage"
      :total="total"
      :page-sizes="[5, 10, 15, 20]"
      layout="prev, pager, next, sizes, -> ,jumper, total"
    ></el-pagination>
  </el-card>
</template>

<script lang="ts" setup>
defineOptions({
  name: "Trademark",
});

import { watch, ref } from "vue";

const trademark = ref<any>([]);
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);

const getTrademark = () => {
  setTimeout(() => {
    trademark.value = [
      {
        id: 1,
        tmName: "华为",
        logoUrl: "/9.jpg",
      },
    ];
  }, 500);
};

watch(
  [currentPage, pageSize],
  () => {
    // 发送请求，获取数据
    getTrademark();
  },
  {
    immediate: true,
  }
);
</script>

<style scoped>
.table {
  margin: 20px 0;
}
</style>
